<template>
  <div class="my_popup_content">
    <div class="top">
      <van-nav-bar
        :title="navBarTitle"
        left-text="取消"
        right-text="确认"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div :class="contentType !== 'birthday' && 'content'">
      <van-field
        v-if="contentType !== 'birthday'"
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        :maxlength="maxlength"
        :placeholder="placeholder"
        show-word-limit
      />
      <van-datetime-picker
        v-else
        v-model="message"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :show-toolbar="false"
      />
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
export default {
  name: 'mypopupcontent',
  created() {
    this.minDate = new Date('1970/01/01')
    this.maxDate = new Date()
  },
  props: {
    contentType: String,
    fieldValue: {
      type: [String],
      required: true
    },
    navBarTitle: {
      type: String,
      required: true
    },
    placeholder: {
      type: String
    },
    maxlength: {
      type: String,
      default: '50'
    }
  },
  data() {
    return {
      message: '',
      oldMessage: '',
      showContent: true,
      minDate: '',
      maxDate: ''
    }
  },
  methods: {
    onClickLeft() {
      this.message = this.oldMessage
      this.$listeners.onClickLeft()
    },
    onClickRight() {
      if (this.contentType === 'birthday') {
        const date = this.transFormDateHandler(this.message)
        this.$listeners.onClickRight(date)
      } else {
        this.$listeners.onClickRight(this.message)
      }
    }
  },
  watch: {
    fieldValue: {
      handler(v) {
        if (this.contentType === 'birthday') {
          this.message = this.oldMessage = new Date(v)
        } else {
          this.message = this.oldMessage = v
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.my_popup_content {
  height: 100%;
  background-color: #f5f7f9;
  .content {
    padding: 10px;
  }
}
</style>
